<%@ page import="cn.js.fan.util.ParamUtil" %>
<%@ page import="com.redmoon.oa.person.UserDesktopSetupDb" %>
<%@ page import="cn.js.fan.util.StrUtil" %>
<%@ page import="com.redmoon.oa.flow.FormDb" %>
<%@ page import="com.cloudwebsoft.framework.util.LogUtil" %>
<%@ page import="com.redmoon.oa.pvg.Privilege" %>
<%@ page import="com.redmoon.oa.visual.*" %>
<%@ page import="cn.js.fan.util.ErrMsgException" %>
<%@ page import="com.redmoon.oa.sys.DebugUtil" %>
<%@ page import="com.alibaba.fastjson.JSONArray" %>
<%@ page import="com.redmoon.oa.flow.FormField" %>
<%@ page import="com.redmoon.oa.flow.FormParser" %>
<%@ page import="com.redmoon.oa.basic.SelectDb" %>
<%@ page import="com.redmoon.oa.basic.SelectOptionDb" %>
<%@ page import="java.util.Vector" %>
<%@ page import="com.redmoon.oa.chart.ChartUtil" %>
<%@ page contentType="text/html;charset=utf-8" %>
<%
    int id = ParamUtil.getInt(request, "id", -1);
    UserDesktopSetupDb udsd = new UserDesktopSetupDb();
    udsd = udsd.getUserDesktopSetupDb(id);
    long chartId = StrUtil.toLong(udsd.getMetaData(), -1);
    if (chartId == -1) {
        out.print("请设置关联的图形");
        return;
    }

    FormDb fdChart = new FormDb();
    fdChart = fdChart.getFormDb(ChartUtil.CONFIG_CHART);
    FormDAO fdaoChart = new FormDAO();
    fdaoChart = fdaoChart.getFormDAO(chartId, fdChart);
    String title = fdaoChart.getFieldValue("title");
    String fieldName = fdaoChart.getFieldValue("field_name");
    String moduleCode = fdaoChart.getFieldValue("module_code");
    int max = StrUtil.toInt(fdaoChart.getFieldValue("series_max"), 100);
    String unit = fdaoChart.getFieldValue("unit");

    ModuleSetupDb msd = new ModuleSetupDb();
    msd = msd.getModuleSetupDb(moduleCode);
    if (msd == null) {
        DebugUtil.e(getClass(), "getModuleSetupDb", "模块：" + moduleCode + "不存在！");
        out.print("模块：" + moduleCode + "不存在！");
        return;
    }

    int count = ChartUtil.getCountForChart(request, msd);
%>
<div id="drag_<%=id%>" class="portlet drag_div bor ibox" style="padding:0;">
    <div id="drag_<%=id%>_h" class="drag-h" style="height:3px;padding:0;margin:0;font-size:1px"></div>
    <div class="ibox-title">
        <div class="chart-title">
            <h5>
                <i class="fa <%=udsd.getIcon()%>"></i>
                <span><%=udsd.getTitle()%></span>
            </h5>
        </div>
    </div>
    <div class="portlet_content ibox-content">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="pieBox<%=id%>" style="width: 380px;height:210px;"></div>
        <script type="text/javascript">
            // 解决ECharts Can't get dom width or height!无法初始化图表的问题
            /*var mainContainer = document.getElementById('pieBox');
            //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeMainContainer = function () {
                mainContainer.style.width = window.innerWidth+'px';
                mainContainer.style.height = window.innerHeight*0.8+'px';
            };
            //设置div容器高宽
            resizeMainContainer();*/

            var myChart = echarts.init(document.getElementById('pieBox<%=id%>'));
            var option;

            option = {
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: <%=max%>,
                    splitNumber: 12,
                    radius: '130%', // 仪表盘大小
                    center: ['45%', '67%'], // 位置
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    progress: {
                        show: true,
                        roundCap: true,
                        width: 18
                    },
                    pointer: {
                        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                        length: '75%',
                        width: 16,
                        offsetCenter: [0, '5%']
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 18
                        }
                    },
                    axisTick: {
                        splitNumber: 2,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        length: 12,
                        lineStyle: {
                            width: 3,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 30,
                        color: '#999',
                        fontSize: 12,
                        formatter: function (v) {
                            return v.toFixed(0);
                        }
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        backgroundColor: '#fff',
                        borderColor: '#eee',
                        borderWidth: 1,
                        width: '50%',
                        lineHeight: 20,
                        height: 20,
                        borderRadius: 8,
                        offsetCenter: [0, '35%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return '{value|' + value.toFixed(0) + '}{unit|<%=unit%>}';
                        },
                        rich: {
                            value: {
                                fontSize: 12,
                                fontWeight: 'bolder',
                                color: '#777'
                            },
                            unit: {
                                fontSize: 12,
                                color: '#999',
                                padding: [0, 0, 0, 10]
                            }
                        }
                    },
                    data: [{
                        value: <%=count%>
                    }]
                }]
            };

            option && myChart.setOption(option);

            /*jQuery(window).on('resize',function(){//
                //屏幕大小自适应，重置容器高宽
                resizeMainContainer();
                myChart.resize();
            });*/
        </script>
    </div>
</div>
